<template>
  <div id="fleetStatistics" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">统计汇总</BreadcrumbItem>
				<BreadcrumbItem to="/statistics/fleetSummary">车队汇总报表</BreadcrumbItem>
			</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="exportData"><i class="fa fa-download"></i><span>导出</span></Button>
	    	</ButtonGroup>
			</div>
		</div>

    <TableSearch>
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="4">
            <ButtonGroup>
              <Button type="ghost" @click="changeType('date')"  :class="{'active':searchType==='date'}">日</Button>
              <Button type="ghost" @click="changeType('month')" :class="{'active':searchType==='month'}">月</Button>
              <Button type="ghost" @click="changeType('year')"  :class="{'active':searchType==='year'}">年</Button>
            </ButtonGroup>
          </Col>
          <Col :md="8">
            <FormItem label="统计日期">
              <DatePicker v-model="dataTime" :type="searchType" :options="dataTimeOption" :editable="false" :clearable="false" placeholder="请选择" style="width:100%;"></DatePicker>
		        </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="车队">
              <Select v-model="orgIds" placeholder="请选择车队" clearable :multiple="true">
                <OrgTreeOption></OrgTreeOption>
              </Select>
		        </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="main" style="position:relative;">
      <Tabs type="card" v-model="tabflag" :animated="false">
        <div slot="extra">
          <div v-if="tabflag==='0'&&totalData" class="list-desc">
            <div class="desc-item">
              平均安全指数：<span class="num">{{totalData.avgSafetyIndex||'--'}}</span>
            </div>
            <div class="desc-item">
              行驶里程合计：<span class="num">{{totalData.sumMileage?mileage(totalData.sumMileage):'--'}}</span>
            </div>
            <div class="desc-item">
              行驶时长合计：<span class="num">{{totalData.sumDuration?time(totalData.sumDuration,1,2):'--'}}</span>
            </div>
          </div>
        </div>
        <TabPane name="0" label="统计表">
          <div class="table-content">
						<div class="table" style="margin:0;">
							<table>
								<thead>
									<th>统计日期</th>
									<th>车队</th>
									<th>安全指数</th>
									<th>行驶里程</th>
									<th>行驶时长</th>
								</thead>
								<tbody>
									<tr v-for="(v,i) in pageData.thisPageElements" :key="`fleet-statistics-list-${i}`">
										<td>{{v.dataTimeStr}}</td>
                    <td>{{v.orgName}}</td>
										<td>{{v.safetyIndex || '--'}}</td>
                    <td>{{v.mileage?mileage(v.mileage):'--'}}</td>
    								<td>{{v.duration?time(v.duration,1,2):'--'}}</td>
									</tr>
								</tbody>
							</table>
						</div>
            <Page :total="pageData.totalNumberOfElements" :page-size="pageSize" :current="current" @on-change="loadPage" show-total></Page>
					</div>
        </Tabpane>
      </Tabs>
      <Spin size="large" fix v-if="isLoading"></Spin>
    </div>
  </div>
</template>
<style lang="less" src="@/assets/styles/fleet/fleet-statistics.less"></style>

<script>
	import {mapState,mapActions} from 'vuex'
  import {download} from '@/util/request'
  import moment from 'moment'
  import unit   from '@/util/unit'
  import EChart from '@/plugin/EChart'

  export default {
    data(){
      return {
        current:1,
        pageSize:15,
        tabflag:'0',  // 0=统计表，1=趋势图
        searchType:'date',
        dataTime:moment().subtract( 1,'d').toDate(),
        orgIds:[],
        submitForm:{},
        dataTimeOption:{
          disabledDate:(d)=>{
            return d > moment().subtract(1,'d').toDate();
          }
        }
      };
    },
    watch:{

    },
    computed:{
      ...mapState('base',['userinfo']),
      ...mapState('statistics/fleetSummary',['totalData','pageData','isLoading']),
      dataTimeVal(){
        let fmt = 'YYYY-MM-DD';
        switch(this.searchType){
          case 'month': fmt = 'YYYY-MM'; break;
          case 'year' : fmt = 'YYYY'; break;
        }
        return moment(this.dataTime).format(fmt);
      }
    },
    methods:{
      moment,time:unit.time,mileage:unit.mileage,
      ...mapActions('statistics/fleetSummary',['reload']),
      changeType(v){
        this.searchType = v;
      },
      search(){
        this.submitForm = {orgIds:this.orgIds.join(','),dataTime:this.dataTimeVal};
        this.loadPage(1);
      },
      loadPage(i){
        this.current = i;
        this.reload({pageNum:this.current,pageSize:this.pageSize,...this.submitForm});
      },
      exportData(){
        download('/stat/teamTotalStat/export',this.submitForm);
      }
    },
    mounted(){
      this.search();
    },
    destroyed(){

    }
  }
</script>
